<script setup lang="ts">
import { ref, watch, computed, onMounted, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { useLocaleStoreWithOut } from '@/store/modules/locale'
import { useEmitt } from '@/hooks/web/useEmitt'
import { companyDetail } from '@/api/company'
import { getCurUser, getToken } from '@/utils'
import { PATH_URL } from '@/config/axios'
import companyImg from '@/assets/imgs/company.png'
import { useCache } from '@/hooks/web/useCache'
const localeStore = useLocaleStoreWithOut()
const curLang = localeStore.getCurrentLocale.lang
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('logo')
const appStore = useAppStore()

const show = ref(true)
//修改菜单上面的名称
const title = ref('')
const logoSrc = ref('')
const layout = computed(() => appStore.getLayout)
const { wsCache } = useCache()
const { emitter } = useEmitt()
const collapse = computed(() => appStore.getCollapse)
onMounted(() => {
  if (unref(collapse)) show.value = false
  getLogoOrName(0)
})
useEmitt({
  //無需填寫按鈕調用方法
  name: 'updateCompanyData',
  callback: () => {
    getLogoOrName(1)
  }
})
const getLogoOrName = async (type) => {
  // 獲取當前用戶tenantId
  const user = getCurUser() as any
  const id = user.tenantId
  //公司資料
  if (!id) return
  let company
  if (type == 1) {
    company = await companyDetail({ tenantId: id })
    wsCache.set('companyData', company)
  } else {
    company = wsCache.get('companyData')
  }
  title.value = company.data.name //'中文名称'
  if (curLang == 'en') title.value = company.data.enName //'英文名称'
  // if (title.value.length > 20) {
  //   title.value = title.value.slice(0, 20) + '...'
  // }
  emitter.emit('updateCompanyDataUserInfo')
  try {
    const imgurljson = JSON.parse(company.data.url)
    let url = PATH_URL + 'form/file/previewFile?isScale=true'
    url += '&fileId=' + imgurljson.fileId
    url += '&time=' + new Date().getTime()
    url += '&token=' + getToken()
    logoSrc.value = url
  } catch (error) {}
}
watch(
  () => collapse.value,
  (collapse: boolean) => {
    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
      show.value = true
      return
    }
    if (!collapse) {
      setTimeout(() => {
        show.value = !collapse
      }, 400)
    } else {
      show.value = !collapse
    }
  }
)

watch(
  () => layout.value,
  (layout) => {
    if (layout === 'top' || layout === 'cutMenu') {
      show.value = true
    } else {
      if (unref(collapse)) {
        show.value = false
      } else {
        show.value = true
      }
    }
  }
)
</script>

<template>
  <router-link
    :class="[
      prefixCls,
      layout !== 'classic' ? `${prefixCls}__Top` : '',
      'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
    ]"
    to="/"
  >
    <!-- 这里修改logo -->
    <!-- fit="contain" -->
    <el-image
      fit="contain"
      v-if="logoSrc"
      :src="logoSrc"
      class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
    />

    <el-image fit="contain" v-else :src="companyImg" style="max-height: 38px" />
    <div
      v-if="show"
      style="
        width: 180px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      "
      :class="[
        'ml-10px text-16px font-700',
        {
          'text-[var(--logo-title-text-color)]': layout === 'classic',
          'text-[var(--top-header-text-color)]':
            layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
        }
      ]"
    >
      {{ title }}
    </div>
  </router-link>
</template>
